<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/h-ui/css/H-ui.admin.css">
    <link rel="stylesheet" href="${ctx}/libjs/plugins/h-ui/style.css">
    <%--<script src="${ctx}/libjs/jquery.min.js"></script>--%>
    <%--<script src="${ctx}/libjs/bootstrap.js"></script>--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.3&key=e392de55be62b195115e32b97043a1bd&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="${ctx}/appjs/member/member/equity.js"></script>
    <style>
        th,td {
            border-right: 1px solid #eee;
        }
        .rowAddDelBtn {
            line-height: 19.5px;
            margin: 2px;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            border: none;
            font-size: 15px;
            display: inline-block;
        }
        #bableBody tr:first-child .rowDelBtn {
            display: none;
        }
        #chargeHandselBody tr:first-child .rowDelBtn {
            display: none;
        }
    </style>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>会员管理</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>充值赠送权益金规则</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="columns pull-left">
                        <h5 class="font-bold">充值赠送权益金规则</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content" style="padding-bottom: 150px">
                    <form class="form-horizontal m-t layui-form" id="frmEquity">
                        <div class="form-group row" id="handselTableId" class="col-sm-15 col-form-label text-left"   >
                            <div id="handselId" class="col-sm-15  text-left" style="padding: 30px; margin: 0 auto;">
                                <table id="chargeHandselId" class="col-sm-15 col-form-label text-left" style="color: gray;border-top: 1px solid #e5e6e7;border-left: 1px solid #e5e6e7; font-size: 14px ;line-height: 60px;">
                                    <thead style="display: block;background-color: #b4dbed;">
                                    <th style="min-width: 155px; text-align: center;"><i class="fa fa-gear"></i></th>
                                    <th style="min-width: 200px; text-align: center;">档位</th>
                                    <th style="min-width: 400px; text-align: center;">充值金额</th>
                                    <th style="min-width: 400px; text-align: center;">权益金(赠送金额)</th>
                                    <th style="min-width: 400px; text-align: center;">累计消费满N元可用</th>
                                    </thead>
                                    <tbody id="chargeHandselBody" style="display: block;padding-top: 30px;" >
                                    <c:choose>
                                        <c:when test="${infoSize gt 0}">
                                            <c:forEach items="${infos}" var="info" varStatus="status">
                                                <tr>
                                                    <td style="min-width: 155px; text-align: center;">
                                                        <div class="rowAddDelBtn rowAddBtn" style="background-color: #ff5581;font-size: 15px !important;">+</div>
                                                        <div class="rowAddDelBtn rowDelBtn" style="background-color: greenyellow;">-</div>
                                                    </td>
                                                    <td style="min-width: 200px; text-align: center;">${status.index+1}</td>
                                                    <td style="min-width: 400px; text-align: center;"><input type="text" name="rechargeAmount" id="' + rechargeAmount + '1" value="${info.rechargeAmount}" maxlength="100" style="width: 90%; height: 54px; border: 1px solid #e6e6e6;"/></td>
                                                    <td style="min-width: 400px; text-align: center;"><input type="text" name="gainAmount" id="' + gainAmount + '" value="${info.gainAmount}" maxlength="100" style="width: 90%; height: 54px; border: 1px solid #e6e6e6;"/></td>
                                                    <td style="min-width: 400px; text-align: center;"><input type="text" name="consumeUseAmount" id="' + consumeUseAmount + '" value="${info.consumeUseAmount}" maxlength="100" style="width: 90%; height: 54px; border: 1px solid #e6e6e6;"/></td>
                                                </tr>
                                            </c:forEach>
                                        </c:when>
                                        <c:otherwise>
                                            <tr>
                                                <td style="min-width: 155px; text-align: center;">
                                                    <div class="rowAddDelBtn rowAddBtn" style="background-color: #ff5581;font-size: 15px !important;">+</div>
                                                    <div class="rowAddDelBtn rowDelBtn" style="background-color: greenyellow;">-</div>
                                                </td>
                                                <td style="min-width: 200px; text-align: center;">1</td>
                                                <td style="min-width: 400px; text-align: center;"><input type="text" name="rechargeAmount" id="' + rechargeAmount + '1" maxlength="100" style="width: 90%; height: 54px; border: 1px solid #e6e6e6;"/></td>
                                                <td style="min-width: 400px; text-align: center;"><input type="text" name="gainAmount" id="' + gainAmount + '" maxlength="100" style="width: 90%; height: 54px; border: 1px solid #e6e6e6;"/></td>
                                                <td style="min-width: 400px; text-align: center;"><input type="text" name="consumeUseAmount" id="' + consumeUseAmount + '" maxlength="100" style="width: 90%; height: 54px; border: 1px solid #e6e6e6;"/></td>
                                            </tr>
                                        </c:otherwise>
                                    </c:choose>
                                    </tbody>
                                    <!--循环代码加载此处-->
                                </table>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){

        //新增行
        $("#bableBody").on('click','tr  .rowAddBtn',function(){
            var rowHtml = $(this).parent().parent().html();
            console.log("rowHtml:",rowHtml);
            $(this).parent().parent().parent().append("<tr>"+rowHtml+"</tr>");
            renderTBody("bableBody");
        });
        //删除行
        $("#bableBody").on('click','tr  .rowDelBtn',function(){
            $(this).parent().parent().remove();
            renderTBody("bableBody");
        });

        //新增行
        $("#chargeHandselBody").on('click','tr  .rowAddBtn',function(){
            var rowHtml = $(this).parent().parent().html();
            console.log("rowHtml:",rowHtml);
            $(this).parent().parent().parent().append("<tr>"+rowHtml+"</tr>");
            renderTBody("chargeHandselBody");
        });
        //删除行
        $("#chargeHandselBody").on('click','tr  .rowDelBtn',function(){
            $(this).parent().parent().remove();
            renderTBody("chargeHandselBody");
        });
       /* debugger
        var gainType = $("#gainTypeId").val();
        typeChange(this,gainType);*/

    });
    //重载表单中的“档位”值
    function renderTBody(bodyId) {
        $("#"+bodyId).find("tr").each(function(index,element){
            $(element).find("td").eq(1).text(index+1);
        });
    }
    setting.init();
</script>
</body>
</html>
